<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    {% load i18n static simpletags %}
	<link rel="icon" href="{% static 'logo.png' %}">

    <!-- Tailwind -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
      <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">


<style>
     @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');

     .font-family-karla {
         font-family: karla;
     }
     .forgetpassword{
      text-decoration: underline;
     }

</style>

  </head>
  <body class="bg-white font-family-karla h-screen">
{% load i18n %}
{% load account socialaccount %}
{% load widget_tweaks %}



{% get_providers as socialaccount_providers %}
<div class="w-full flex flex-wrap">

<!-- Login Section -->
<div class="w-full md:w-1/2 flex flex-col">

  <div class="flex justify-center md:justify-start pt-12 md:pl-12 md:-mb-24">
    <a href="/" class="bg-black text-white font-bold text-xl p-4">{% trans "disease recognition" %}</a>
</div>

	<div class="flex flex-col justify-center md:justify-start my-auto pt-8 md:pt-0 px-8 md:px-24 lg:px-32">
		<p class="text-center text-3xl">{% trans "Welcome." %}</p>
		<form class="flex flex-col pt-3 md:pt-8" method="POST" action="{% url 'account_login' %}" >
			{% csrf_token %}


      <div class="flex flex-col pt-4">
				<label for="login" class="text-lg">{% trans "Login" %}</label>
				{% render_field form.login class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" placeholder=form.login.label id="login" %}
				<!-- <input type="email" id="account" placeholder="your@email.com or username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline"> -->
      </div>

  <div class="flex flex-col pt-4">
				<label for="Password" class="text-lg">Password</label>
				{% render_field form.password class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" placeholder=form.password.label id="Password" %}
				<!-- <input type="email" id="account" placeholder="your@email.com or username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline"> -->
			</div>
        {{ form.errors.as_text|cut:"__all__"|cut:"*" }}

			<!--
			 <div class="flex flex-col pt-4">
				 <label for="password" class="text-lg">Password</label>
				 <input type="password" id="password" placeholder="Password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline">
			 </div>
-->
          {% if redirect_field_value %}
			<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
			{% endif %}
			<br> <a class="forgetpassword" href="{% url 'account_reset_password' %}">{% trans "Forgot Password? " %}</a>
			<button class="bg-black text-white font-bold text-lg hover:bg-gray-700 p-2 mt-8" type="submit">{% trans "Log In" %}
			</button>
		</form>
		<div class="text-center pt-12 pb-12">
			<p>{% trans "Don't have an account?" %} <a href="{{ signup_url }}" class="underline font-semibold">{% trans "Register here." %} </a></p>
		</div>
	</div>
</div>
  <!-- Image Section -->
  <div class="w-1/2 shadow-2xl ">
    <img class="object-cover w-full h-screen hidden md:block" src="https://media.istockphoto.com/id/1496427778/zh/%E5%90%91%E9%87%8F/sick-woman-with-cold-and-flu-concept.jpg?s=612x612&w=0&k=20&c=caJtjDLPF_a3As8usaoVqw8A_HGwdbrKELgWP0Bu6Bc=">
</div>

</div>




</body>
</html>